<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=650, initial-scale=1.0, user-scalable=no">
<title>5Mile News</title>

<link rel="shortcut icon" href="../favicon.ico"> 
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
<link rel="stylesheet" type="text/css" href="css/keyword.css" />
<link rel="stylesheet" type="text/css" href="css/news.css" />
<link rel="stylesheet" type="text/css" href="css/map.css" />
<link rel="stylesheet" type="text/css" href="css/title.css" />

<script src="http://apis.daum.net/maps/maps3.js?apikey=145d147536e9711fe373eda0c9ffca125892cd85" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="javascript.js" type="text/javascript"></script>
<script src="js/view.js" type="text/javascript"></script>
<script src="js/google_search.js" type="text/javascript"></script>
</head>
<body onload="getGeolocation()">
<center>
<!-- TITLE Block -->
<div align="center" class="title-wrapper">
	<div class="title-block">
		<h2>5 MILE NEWS</h2>
	</div>
</div>
<div align="center" style="width:1050px; height:580px;">
	<!-- Map Block -->
	<div style="height:300px; width:500px; float:left;">
		<div class="map-wrapper">
			<h3>MAP</h3>
			<div id="map_canvas" class="map-block">
			 SEARCHING...
			</div>
		</div>
	</div>
	<div style="width:50px; height:300px; float:left;">
	</div>
	<!-- Keyword Block -->
	<div id="keyword" style="height:300px; width:500px; float:left;">
		<div  class="keyword-wrapper">
			<h3>KEYWORD</h3>
			<div id="keyword-block" class="keyword-block">
				<div id="bb-item1" class="bb-item">
					LOADING...
				</div>
				<!-- <div id="bb-item2" class="bb-item">
				</div> -->
			</div>
			<!-- <nav>
				<a id="keyword-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
				<a id="keyword-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
			</nav> -->
		</div>
	</div>
	<div id="blank" style="height:80px; width:1050px; float:left;"></div>
	<!-- News Block  -->
	<div id="news" style="height:200px; width:1050px; float:left;">
		<div class="news-wrapper">
			<h3>NEWS</h3>
			<div id="news-block" class="news-block">
				<div id="news-item0" class="bb-item">
				</div>
				<div id="news-item1" class="bb-item">
				</div>
				<div id="news-item2" class="bb-item">
				</div>
				<div id="news-item3" class="bb-item">
				</div>
				<div id="news-item4" class="bb-item">
				</div>
				<div id="news-item5" class="bb-item">
				</div>
				<div id="news-item6" class="bb-item">
				</div>
				<div id="news-item7" class="bb-item">
				</div>
				<div id="news-item8" class="bb-item">
				</div>
				<div id="news-item9" class="bb-item">
				</div> 
			</div>
			<nav>
				<a id="news-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
				<a id="news-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
			</nav>
		</div>
	</div>
</div>
</center>

<script>
var NewsPage = (function() {
	var config = {
			$bookBlock : $( '#news-block' ),
			$navNext : $( '#news-nav-next' ),
			$navPrev : $( '#news-nav-prev' ),
		},
		init = function() {
			config.$bookBlock.bookblock( {
				orientation : 'horizontal',
				speed : 800,
				shadowSides : 0.8,
				shadowFlip : 0.7,
				circular: true,
				autoplay: true,
				interval: 5000,
				onEndFlip : function( page, isLimit ) 
				{
					/* alert(page); */
					/* sendRequest(latitude, longitude); */
				}
			} );
			initEvents();
		},
		initEvents = function() {
			
			var $slides = config.$bookBlock.children();

			// add navigation events
			config.$navNext.on( 'click touchstart', function() {
				config.$bookBlock.bookblock( 'next' );
				return false;
			} );

			config.$navPrev.on( 'click touchstart', function() {
				config.$bookBlock.bookblock( 'prev' );
				return false;
			} );
		};

		return { init : init };
})();

	var Page = (function() {
		
		var config = {
				$bookBlock : $( '#keyword-block' ),
				$navNext : $( '#keyword-nav-next' ),
				$navPrev : $( '#keyword-nav-prev' ),
			},
			init = function() {
				config.$bookBlock.bookblock( {
					speed : 800,
					shadowSides : 0.8,
					shadowFlip : 0.7,
					circular: true,
					autoplay: false,
					interval: 3000,
					onEndFlip : function( page, isLimit ) 
					{
						/* sendRequest(latitude, longitude); */
					}
					
				} );
				initEvents();
			},
			initEvents = function() {
				
				var $slides = config.$bookBlock.children();

				// add navigation events
				config.$navNext.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'next' );
					return false;
				} );

				config.$navPrev.on( 'click touchstart', function() {
					config.$bookBlock.bookblock( 'prev' );
					return false;
				} );
			};

			return { init : init };

	})();
Page.init();
NewsPage.init();
</script>
</body>
</html>